<template>
	<view class="content">
		<view class="body">
			<view class="reference" v-if="reference.referenceId">
				<view class="reference-title">内推人:<text>{{reference.referenceName}}</text><text
						class="role">【{{reference.referenceRole | formatRole }}】</text></view>
				<view class="reference-title">推荐信：</view>
				<text class="reference-content">{{reference.referenceContent}}</text>
			</view>
			<view class="reference" v-else-if="reference.referenceContent">
				<view class="reference-title">自荐信：</view>
				<text class="reference-content">{{reference.referenceContent}}</text>
			</view>
			<view class="base-info space-between-algin bottom-line padding-height-20">
				<view class="column">
					<view class="align-height">
						<text class="name">{{ resume.name }}</text>
						<!-- <text class="yzb yzb-bianji2 margin-left-20"></text> -->
					</view>
					<text class="text-color">{{ formatAge(resume.timeToWork) }}年经验 · {{ formatAge(resume.birthday) }}岁 ·
						{{ resume.education }}</text>
					<view class="phone" v-if="resume.phone" @click="call(resume.phone)">
						<text>{{ hidePhone(resume.phone) }}</text>
						<text class="yzb yzb-dianhua1"></text>
					</view>
				</view>
				<image class="header" :src="resume.avatar || '/static/img/head.png'"></image>
			</view>
			<view class="skill width-100 padding-height-30 column bottom-line">
				<view class="space-between-algin"><text class="text-title">个人优势</text></view>
				<text class="item-content margin-height-20">{{ resume.personalSkill }}</text>
			</view>
			<view class="status width-100 space-between-algin padding-height-40 bottom-line">
				<text class="text-title">求职状态</text>
				<view class="align-height">
					<picker @change="bindPickerChange" disabled="true" :value="workStatus" :range="workStatusArray">
						<input disabled="true" class="padding-10" style="text-align: right;" v-model="workStatus" />
					</picker>
				</view>
			</view>

			<view class="expect column width-100 padding-height-30 bottom-line">
				<view class="space-between-algin"><text class="text-title">求职期望</text></view>
				<view class="column margin-top-10">
					<view class="column margin-top-10" v-for="(item, index) in resume.jobExpectList" :key="index">
						<view class="space-between-algin">
							<text class="text-sub-title">{{ item.postName }}</text>
						</view>
						<text class="text-color">{{ item.expectSalary }} · {{ item.jobTypeNames}} · {{ item.workCity}}</text>
					</view>
				</view>
			</view>

			<view class="work-exp column width-100 padding-height-30 bottom-line">
				<view class="space-between-algin"><text class="text-title">工作经历</text></view>
				<view class="column margin-top-10" :class="index > 0 ? 'top-line' : ''"
					v-for="(item, index) in resume.workExpList" :key="index">
					<view class="space-between-algin padding-height-10">
						<text class="text-sub-title">{{ item.companyName }}</text>
						<view class="align-height">
							<text
								class="text-color-grey">{{ formatDates(item.startDate) }}-{{ formatDates(item.endDate) }}</text>
						</view>
					</view>
					<text class="text-color">{{ item.postName }}</text>
					<text class="item-content margin-height-20">{{ item.jobContent }}</text>
					<view class="skill-item" v-if="item.skill">
						<text v-for="(item2, index2) in formatString(item.skill)" :key="index2">{{ item2 }}</text>
					</view>
				</view>
			</view>

			<view class="pro-exp column width-100 padding-height-30 bottom-line">
				<view class="space-between-algin"><text class="text-title">项目经历</text></view>
				<view class="column margin-top-10" :class="index > 0 ? 'top-line' : ''"
					v-for="(item, index) in resume.proExpList" :key="index">
					<view class="space-between-algin padding-height-10">
						<text class="text-sub-title">{{ item.name }}</text>
						<view class="align-height">
							<text
								class="text-color-grey">{{ formatDates(item.startDate) }}-{{ formatDates(item.endDate) }}</text>
						</view>
					</view>
					<text class="text-color">{{ item.role }}</text>
					<text class="item-content margin-top-20">内容：{{ item.descr }}</text>
					<text class="item-content margin-top-10" v-if="item.performance">业绩：{{ item.performance }}</text>
				</view>
			</view>

			<view class="edu-exp column width-100 padding-height-30">
				<view class="space-between-algin"><text class="text-title">教育经历</text></view>
				<view class="column margin-top-10 width-100" v-for="(item, index) in resume.eduExpList" :key="index">
					<view class="space-between-algin">
						<text class="text-sub-title">{{ item.school }}</text>
						<view class="align-height">
							<text
								class="text-color-grey">{{ formatDates(item.startTime) }}-{{ formatDates(item.endTime) }}</text>
						</view>
					</view>
					<text class="text-color">{{ item.major }} {{ item.education }}</text>
				</view>
			</view>
			<view class="person-honor column width-100 padding-height-30 ">
				<view class="space-between-algin">
					<text class="text-title">个人荣誉</text>
				</view>
				<view class="column margin-top-10 width-100" v-for="(item, index) in resume.honorList" :key="index">
					<view class="space-between-algin">
						<text class="text-color">{{ item.honorName }}</text>
						<text class="yzb yzb-Photo-share" style="font-size: 34upx;color: #12ae85;"
							@click="previewImage(item.honorImg)"></text>
					</view>
					<text class="text-color-grey">{{ formatDates(item.honorTime) }}</text>
				</view>
			</view>
		</view>
		<view class="bottom">
			<text v-if="applyStatus<6" class="btn-no" @click="refuse()">不合适</text>
			<text v-if="applyStatus==2" class="btn-yes" @click="firstPass()">通过初筛</text>
			<text v-if="applyStatus==3" class="btn-yes" @click="bishi()">邀请笔试</text>
			<text v-if="applyStatus==3 || applyStatus==4" class="btn-yes" @click="mianshi()">邀请面试</text>
			<text v-if="applyStatus==9" class="btn-yes" @click="mianshi()">重新邀请面试</text>
			<text v-if="applyStatus==3  || applyStatus==4  || applyStatus==5" class="btn-yes"
				@click="luyong()">确定录用</text>
		</view>
		<uni-popup ref="popup1" background-color="#fff">
			<view class="popup-content">
				<view class="top">
					<text class="title">笔试信息</text>
					<text class="yzb yzb-shanchu" @click="closePop1"></text>
				</view>
				<view class="form">
					<uni-forms ref="baseForm" :modelValue="extData">
						<uni-forms-item label="联系人" required>
							<uni-easyinput v-model="extData.name" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="联系电话" required>
							<uni-easyinput v-model="extData.phone" placeholder="请输入联系电话" />
						</uni-forms-item>
						<uni-forms-item label="笔试地点">
							<uni-easyinput v-model="extData.address" placeholder="请输入面试地点" />
						</uni-forms-item>
						<uni-forms-item label="笔试时间">
							<uni-datetime-picker type="datetime" return-type="string"
								v-model="extData.time" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="pop-bottom">
					<text class="cancel" @click="closePop1()">取消</text>
					<text class="submit" @click="submit1()">邀请笔试</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" background-color="#fff">
			<view class="popup-content">
				<view class="top">
					<text class="title">面试信息</text>
					<text class="yzb yzb-shanchu" @click="closePop2"></text>
				</view>
				<view class="form">
					<uni-forms ref="baseForm" :modelValue="extData">
						<uni-forms-item label="联系人" required>
							<uni-easyinput v-model="extData.name" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="联系电话" required>
							<uni-easyinput v-model="extData.phone" placeholder="请输入联系电话" />
						</uni-forms-item>
						<uni-forms-item label="面试地点">
							<uni-easyinput v-model="extData.address" placeholder="请输入面试地点" />
						</uni-forms-item>
						<uni-forms-item label="面试时间">
							<uni-datetime-picker type="datetime" return-type="string"
								v-model="extData.time" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="pop-bottom">
					<text class="cancel" @click="closePop2()">取消</text>
					<text class="submit" @click="submit2()">邀请面试</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import mCell from '@/components/m-cell/m-cell.vue';
	import {
		formatDate,
		calCurrentYear
	} from '@/common/date';
	export default {
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		},
		components: {
			mCell
		},
		data() {
			return {
				skillContent: '',
				statusIndex: 0,
				workStatusArray: ['在职-暂不考虑', '在职-考虑机会', '在职-月内到岗', '离职-随时到岗'],
				resume: {},
				workStatus: null,

				deliveryFlag: false, //
				id: null,
				applyId: null,
				applyStatus: null, //1-已投递，2-被查看，3-初筛，4-笔试，5-面试，6-录用，9-不合适
				reference: {},
				extData:{
					name:"",
					phone:"",
					address:"",
					time:""
				},
			};
		},
		filters: {
			formatRole(value) {
				if (value == 'company') {
					return "企业HR"
				} else if (value == 'parent') {
					return "家长"
				} else if (value == 'school') {
					return "学校"
				} else if (value == 'teacher') {
					return "导师"
				}
			},
			formatJobType(val) {
				if (val == 0) {
					return "全职"
				} else if (val == 1) {
					return "兼职"
				}
				if (val == 2) {
					return "实习"
				}
			}
		},
		onLoad(query) {
			console.log("query==", query);
			this.id = query.resumeId;
			this.getResume(query.resumeId);
			this.applyStatus = query.applyStatus;
			this.applyId = query.applyId;
			if (this.applyStatus == 1) {
				this.updateApplyStatus(2,null);
			}
			this.getApplyDetail();
		},
		methods: {

			previewImage(img) {
				let imgs = [];
				imgs.push(img);
				uni.previewImage({
					indicator: 'number',
					loop: true,
					current: img,
					urls: imgs
				});
			},

			async getApplyDetail() {
				let param = {
					id: this.applyId
				};
				let res = await this.$apis.getApplyDetail(param);
				this.reference = res;
				console.log("==getApplyDetail==", res)
			},

			firstPass() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定通过初筛？',
					success(res) {
						if (res.confirm) {
							that.updateApplyStatus(3,'')
						}
					}
				});
			},

			bishi() {
				this.showPop1();
				// var that = this;
				// uni.showModal({
				// 	title: '提示',
				// 	content: '确定邀请参加笔试？',
				// 	success(res) {
				// 		if (res.confirm) {
				// 			that.updateApplyStatus(4,'')
				// 		}
				// 	}
				// });
			},

			mianshi() {
				this.showPop2();
				// var that = this;
				// uni.showModal({
				// 	title: '提示',
				// 	content: '确定邀请参加面试？',
				// 	success(res) {
				// 		if (res.confirm) {
				// 			that.updateApplyStatus(5,'')
				// 		}
				// 	}
				// });
			},
			//笔试
			submit1(){
				console.log("data===",this.extData);
				if(!this.extData.name){
					uni.showToast({
						icon:'none',
						title:"请输入联系人"
					})
					return;
				}
				if(!this.extData.phone){
					uni.showToast({
						icon:'none',
						title:"请输入联系电话"
					})
					return;
				}
				if(!this.extData.address){
					uni.showToast({
						icon:'none',
						title:"请输入笔试地址"
					})
					return;
				}
				if(!this.extData.time){
					uni.showToast({
						icon:'none',
						title:"请输入笔试时间"
					})
					return;
				}
				this.closePop1();
				let content="";
				content="联系人："+this.extData.name+"\n";
				content+="联系电话："+this.extData.phone+"\n";
				content+="笔试时间："+this.extData.time+"\n";
				content+="笔试地点："+this.extData.address+"\n";
				this.updateApplyStatus(4,content)
			},
			
			submit2(){
				
				if(!this.extData.name){
					uni.showToast({
						icon:'none',
						title:"请输入联系人"
					})
					return;
				}
				if(!this.extData.phone){
					uni.showToast({
						icon:'none',
						title:"请输入联系电话"
					})
					return;
				}
				if(!this.extData.address){
					uni.showToast({
						icon:'none',
						title:"请输入面试地址"
					})
					return;
				}
				if(!this.extData.time){
					uni.showToast({
						icon:'none',
						title:"请输入面试时间"
					})
					return;
				}
				this.closePop2();
				let content="";
				content="联系人："+this.extData.name+"\n";
				content+="联系电话："+this.extData.phone+"\n";
				content+="面试时间："+this.extData.time+"\n";
				content+="面试地点："+this.extData.address+"\n";
				this.updateApplyStatus(5,content)
			},

			closePop1() {
				this.$refs.popup1.close();
			},
			showPop1() {
				this.$refs.popup1.open("bottom")
			},
			closePop2() {
				this.$refs.popup2.close();
			},
			showPop2() {
				this.$refs.popup2.open("bottom")
			},

			luyong() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定录用？',
					success(res) {
						if (res.confirm) {
							that.updateApplyStatus(6,'')
						}
					}
				});
			},

			refuse() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定不合适？',
					success(res) {
						if (res.confirm) {
							that.updateApplyStatus(9,'');
						}
					}
				});
			},

			async updateApplyStatus(applyStatus,content) {
				let param = {
					id: this.applyId,
					applyStatus: applyStatus,
					remark:content,
				}
				let res = await this.$apis.updateApplyStatus(param);
				this.applyStatus = applyStatus;
				uni.showToast({
					icon:'none',
					title:"操作成功"
				})
			},

			async getResume(id) {
				let param = {
					id: id
				};
				this.resume = await this.$apis.getResume(param);
				this.workStatus = this.resume.jobStatus;
			},

			formatDates(time) {
				if (time == null || time === '') {
					return 'N/A';
				}
				let str = time.replace(/-/g, '/');
				let date = new Date(str);
				// return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
				return formatDate(date, 'yyyy.MM');
			},

			formatAge(birthday) {
				return calCurrentYear(birthday);
			},

			async bindPickerChange(e) {
				this.workStatus = this.workStatusArray[e.target.value];
				let param = {
					id: this.resume.id,
					jobStatus: this.workStatus
				};
				let res = await this.$apis.updateResumeBasic(param);
			},

			formatString(val) {
				return val.split(',');
			},

			hidePhone(phone) {
				return this.$mUtils.phoneHiden(phone);
			},

			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	view {
		display: flex;
	}

	.text-title {
		font-size: $font-size-36;
		font-weight: bold;
		color: $font-color-000;
	}

	.text-sub-title {
		font-size: $font-base-more;
		font-weight: bold;
		color: $font-color-000;
	}

	.item-content {
		color: $uni-text-color;
	}

	.content {
		padding: 20upx;
		box-sizing: border-box;
	}

	.body {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 100upx;
	}

	.reference {
		display: flex;
		flex-direction: column;
		border-bottom: 2upx solid #eee;

		.reference-title {
			font-weight: bold;
			font-size: 34upx;
			display: flex;
			flex-direction: row;
			align-items: center;

			text {
				font-weight: normal;
				margin-left: 20upx;
				font-size: 34upx;
				color: $main-color;
			}

			.role {
				font-size: 32upx;
				color: #B05062;
			}
		}

		.reference-content {
			margin-bottom: 20upx;
			background-color: #F8f8f8;
			padding: 15upx;
			border-radius: 5upx;
		}
	}

	.base-info {
		.name {
			font-size: 44upx;
			font-weight: bold;
		}

		.yzb-bianji2 {
			color: $font-color-000;
		}

		.header {
			width: 150upx;
			height: 150upx;
			border-radius: 50%;
		}

		.phone {
			color: $font-color-333;

			.yzb-dianhua1 {
				margin-left: 10upx;
				color: $main-color;
			}
		}
	}

	.yzb-jia1 {
		color: $font-color-333;
		font-weight: bold;
		font-size: 44upx;
	}

	.skill-item {
		margin-top: 20upx;
		padding-bottom: 10upx;
		flex-wrap: wrap;

		text {
			font-size: $uni-font-size-sm;
			padding: 5upx 20upx;
			margin-right: 15upx;
			margin-bottom: 15upx;
			background-color: $border-color-base;
			border-radius: 8upx;
			color: $font-color-666;
		}
	}

	.skill-item2 {
		margin-top: 20upx;
		padding-bottom: 10upx;
		flex-wrap: wrap;

		text {
			font-size: $uni-font-size-sm;
			padding: 10upx 20upx;
			margin-right: 15upx;
			margin-bottom: 15upx;
			background-color: $border-color-base;
			border-radius: 8upx;
			color: $font-color-666;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 10upx 0;
		background-color: $bgcolor_white;
		border-top: 1upx solid $border-color-base;

		text {
			flex: 1;
			padding: 15upx 0;
			text-align: center;
			border-radius: 10rpx;
		}

		.btn-no {
			background-color: #FCF0F0;
			color: #B05062;
			margin: 0 30rpx;
		}

		.btn-yes {
			background-color: $main-color;
			color: #fff;
			margin: 0 30rpx 0 0;
		}
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		.top {
			position: relative;
			text-align: center;
			align-items: center;
			padding: 20upx;
			border-bottom: 2upx solid #eee;
			box-sizing: border-box;

			.title {
				font-weight: bold;
			}

			.yzb-shanchu {
				position: absolute;
				right: 0;
				padding-right: 20upx;
			}
		}
		.form {
			padding: 20upx;
			display: block;
		}

		.pop-bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: row;
			padding: 20upx;
			box-sizing: border-box;

			.cancel {
				width: 40%;
				text-align: center;
				background-color: #999;
				color: #fff;
				height: 70upx;
				line-height: 70upx;
				border-radius: 10upx;
			}

			.submit {
				margin-left: 30upx;
				width: 40%;
				text-align: center;
				background-color: $main-color;
				color: #fff;
				height: 70upx;
				line-height: 70upx;
				border-radius: 10upx;
			}
		}

		.AI {}
	}
</style>